JavaScript
Not to be confused with Java
(programming language) , Java
(software platform) , or Javanese
script.
JavaScript
Unofficial JavaScript logo
Paradi
gm(s)
Multi-paradigm :
scripting , object-oriented
(prototype-based ),
imperative , functional[1]
Design
ed by
Brendan Eich
Develo
per
Netscape
Communications
Corporation , Mozilla
Foundation
Appear
ed in
1995; 19 years ago
Stable
releas
e
1.8.5 [2] / March 22, 2011;
3 years ago
Typing
discipl
ine
dynamic, duck
Major
imple
mentat
ions
KJS, Rhino,
SpiderMonkey, V8 ,
Carakan , Chakra
Influen
ced by
Scheme, Self, Java , C,
Python , AWK, HyperTalk
Influen
ced ActionScript, AtScript,
CoffeeScript, Dart,
JScript .NET , Objective-J ,
QML, TypeScript , Node.js ,
LiveScript
JavaScript at Wikibooks
JavaScript
Filename
extension .js
Internet
media type
application/
javascript
text/
javascript
(obsolete)
[3]
Uniform
Type
Identifier (
UTI)
com.netscape.
javascript-source
[4]
Type of
format
Scripting language
JavaScript (/ ˈ dʒɑːv əˌ s kr ɪp t/ ; JS)
is a dynamic computer
programming language .[5] It is
most commonly used as part of web
browsers, whose implementations
allow client-side scripts to interact
with the user , control the browser,
communicate asynchronously , and
alter the document content that is
displayed.[5] It is also used in
server-side network programming
with frameworks such as Node.js ,
game development and the creation
of desktop and mobile applications.
JavaScript is classified as a
prototype-based scripting language
with dynamic typing and first-class
functions . This mix of features
makes it a multi-paradigm
language, supporting object-
oriented,[6] imperative , and
functional[1][7] programming
styles.
Despite some naming, syntactic ,
and standard library similarities,
JavaScript and Java are otherwise
unrelated and have very different
semantics. The syntax of
JavaScript is actually derived from
C , while the semantics and design
are influenced by Self and Scheme
programming languages. [8]
JavaScript is also used in
environments that aren't web-
based, such as PDF documents,
site-specific browsers, and desktop
widgets. Newer and faster
JavaScript virtual machines (VMs)
and platforms built upon them have
also increased the popularity of
JavaScript for server-side web
applications. On the client side,
JavaScript has been traditionally
implemented as an interpreted
language, but more recent browsers
perform just-in-time compilation.
JavaScript has been standardized
in the ECMAScript language
specification.
History
Beginnings at Netscape
JavaScript was originally developed
by Brendan Eich, while working for
Netscape Communications
Corporation . While competing with
Microsoft for user adoption of web
technologies and platforms,
Netscape considered their client-
server offering a distributed OS with
a portable version of Sun
Microsystems' Java providing an
environment in which applets could
be run. [citation needed ] Because
Java was a competitor of C++ and
aimed at professional programmers,
Netscape also wanted a lightweight
interpreted language that would
complement Java by appealing to
nonprofessional programmers, like
Microsoft's Visual Basic (see
JavaScript and Java ). [9]
Although it was developed under the
name Mocha, the language was
officially called LiveScript when it
first shipped in beta releases of
Netscape Navigator 2.0 in
September 1995, but it was
renamed JavaScript [10] when it
was deployed in the Netscape
browser version 2.0B3. [11]
The change of name from LiveScript
to JavaScript roughly coincided with
Netscape adding support for Java
technology in its Netscape
Navigator web browser. The final
choice of name caused confusion,
giving the impression that the
language was a spin-off of the Java
programming language , and the
choice has been characterized as a
marketing ploy by Netscape to give
JavaScript the cachet of what was
then the hot new web programming
language. [12][13]
There is a common misconception
that the JavaScript language was
influenced by C-- (pronounced
"See-minus-minus"), an earlier web
page scripting language developed
by Nombas .[14][15][16] Brendan
Eich, however, had never heard of
C-- before he created LiveScript.
[17] Nombas did pitch their
embedded web page scripting to
Netscape, though web page
scripting was not a new concept, as
shown by ViolaWWW .[18] Nombas
later switched to offering JavaScript
instead of C-- in their ScriptEase
product and was part of the TC39
group that standardized
ECMAScript.[19][20]
Server-side JavaScript
Netscape introduced an
implementation of the language for
server-side scripting with Netscape
Enterprise Server in December,
1994, soon after releasing
JavaScript for browsers.[21][22]
Since the mid-2000s, there has
been a resurgence of server-side
JavaScript implementations , such
as Node.js. [23][24]
Adoption by Microsoft
JavaScript quickly gained
widespread adoption as a client-
side scripting language for web
pages. Microsoft introduced
JavaScript support in its own web
browser, Internet Explorer , in
version 3.0, released in August
1996. [25] Microsoft's webserver,
Internet Information Server,
introduced support for server-side
scripting in JavaScript with the
release of version 3.0, also in 1996.
Microsoft started to promote
webpage scripting using the
umbrella term Dynamic HTML.
Microsoft's JavaScript
implementation was later renamed
JScript to avoid trademark issues.
JScript added new date methods to
fix the Y2K -problematic methods in
JavaScript, which were based on
Java's java.util.Date
class.
Standardization
In November 1996, Netscape
announced that it had submitted
JavaScript to Ecma International for
consideration as an industry
standard, and subsequent work
resulted in the standardized version
named ECMAScript. In June 1997,
Ecma International published the
first edition of the ECMA-262
specification . In June 1998, some
modifications were made to adapt it
to the ISO/IEC-16262 standard, and
the second edition was released.
The third edition of ECMA-262 was
published on December 1999. [26]
Development of the fourth edition of
the ECMAScript standard was never
completed. [27] The fifth edition was
released in December 2009. The
current edition of the ECMAScript
standard is 5.1, released in June
2011. [28]
Later developments
JavaScript has become one of the
most popular programming
languages on the web. Initially,
however, many professional
programmers denigrated the
language because its target
audience consisted of web authors
and other such "amateurs", among
other reasons. [29] The advent of
Ajax returned JavaScript to the
spotlight and brought more
professional programming attention.
The result was a proliferation of
comprehensive frameworks and
libraries, improved JavaScript
programming practices, and
increased usage of JavaScript
outside of web browsers, as seen by
the proliferation of server-side
JavaScript platforms.
In January 2009, the CommonJS
project was founded with the goal of
specifying a common standard
library mainly for JavaScript
development outside the browser.
[30]
Trademark
"JavaScript" is a trademark of
Oracle Corporation.[31] It is used
under license for technology
invented and implemented by
Netscape Communications and
current entities such as the Mozilla
Foundation .[32]
Features
The following features are common
to all conforming ECMAScript
implementations, unless explicitly
specified otherwise.
Imperative and structured
JavaScript supports much of the
structured programming syntax
from C (e.g., if statements,
while loops, switch
statements, do while loops,
etc.). One partial exception is
scoping: C-style block scoping is
not supported. Instead, JavaScript
has function scoping (although,
block scoping using the let
keyword was added in JavaScript
1.7). Like C, JavaScript makes a
distinction between expressions
and statements . One syntactic
difference from C is automatic
semicolon insertion, which allows
the semicolons that would normally
terminate statements to be omitted.
[33]
Dynamic
Dynamic typing
As in most scripting languages,
types are associated with
values , not with variables. For
example, a variable x could
be bound to a number, then later
rebound to a string. JavaScript
supports various ways to test the
type of an object, including duck
typing .[34]
Object-based
JavaScript is almost entirely
object-based . JavaScript
objects are associative arrays ,
augmented with prototypes (see
below). Object property names
are string keys. They support
two equivalent syntaxes: dot
notation ( obj.x = 10 ) and
bracket notation ( obj
['x'] = 10 ). Properties and
their values can be added,
changed, or deleted at run-time.
Most properties of an object (and
those on its prototype
inheritance chain) can be
enumerated using a
for...in loop. JavaScript
has a small number of built-in
objects such as Function
and Date .
Run-time evaluation
JavaScript includes an eval
function that can execute
statements provided as strings
at run-time.
Functional
First-class functions
Functions are first-class ; they
are objects themselves. As
such, they have properties and
methods, such as .call()
and .bind() .[35] A nested
function is a function defined
within another function. It is
created each time the outer
function is invoked. In addition,
each created function forms a
lexical closure: the lexical
scope of the outer function,
including any constants, local
variables and argument values,
becomes part of the internal
state of each inner function
object, even after execution of
the outer function concludes. [36]
Javascript also supports
anonymous functions .
Prototype-based
Prototypes
JavaScript uses prototypes
where many other object
oriented languages use classes
for inheritance. [37] It is possible
to simulate many class-based
features with prototypes in
JavaScript. [38]
Functions as object
constructors
Functions double as object
constructors along with their
typical role. Prefixing a function
call with new will create an
instance of a prototype,
inheriting properties and
methods from the constructor
(including properties from the
Object prototype). [39]
ECMAScript 5 offers the
Object.create method,
allowing explicit creation of an
instance without automatically
inheriting from the Object
prototype (older environments
can assign the prototype to
null ). [40] The constructor's
prototype property
determines the object used for
the new object's internal
prototype. New methods can be
added by modifying the prototype
of the function used as a
constructor. JavaScript's built-
in constructors, such as
Array or Object , also
have prototypes that can be
modified. While it is possible to
modify the Object
prototype, it is generally
considered bad practice because
most objects in JavaScript will
inherit methods and properties
from the Object prototype
and they may not expect the
prototype to be modified. [41]
Functions as methods
Unlike many object-oriented
languages, there is no distinction
between a function definition and
a method definition. Rather, the
distinction occurs during
function calling; when a function
is called as a method of an
object, the function's local
this keyword is bound to that
object for that invocation.
Implicit and explicit delegation
JavaScript is a delegation
language .
Functions as Roles (Traits and
Mixins)
JavaScript natively supports
various function-based
implementations of Role[42]
patterns like Traits [43][44] and
Mixins . [45][46] Such a function
defines additional behavior by at
least one method bound to the
this keyword within its
function body. A Role then
has to be delegated explicitly
via call or apply to
objects that need to feature
additional behavior that is not
shared via the prototype chain.
Object Composition and
Inheritance
Whereas explicit function-based
delegation does cover
composition in JavaScript,
implicit delegation already
happens every time the prototype
chain is walked in order to, e.g.,
find a method that might be
related to but is not directly
owned by an object. Once the
method is found it gets called
within this object's context.
Thus inheritance in JavaScript is
covered by a delegation
automatism that is bound to the
prototype property of constructor
functions.
Miscellaneous
Run-time environment
JavaScript typically relies on a
run-time environment (e.g., a
web browser) to provide objects
and methods by which scripts
can interact with the
environment (e.g., a webpage
DOM). It also relies on the run-
time environment to provide the
ability to include/import scripts
(e.g., HTML <script>
elements). This is not a
language feature per se, but it is
common in most JavaScript
implementations.
Variadic functions
An indefinite number of
parameters can be passed to a
function. The function can
access them through formal
parameters and also through the
local arguments object.
Variadic functions can also be
created by using the apply
method.
Array and object literals
Like many scripting languages,
arrays and objects (associative
arrays in other languages) can
each be created with a succinct
shortcut syntax. In fact, these
literals form the basis of the
JSON data format.
Regular expressions
JavaScript also supports regular
expressions in a manner similar
to Perl, which provide a concise
and powerful syntax for text
manipulation that is more
sophisticated than the built-in
string functions. [47]
Vendor-specific extensions
JavaScript is officially managed by
Mozilla Foundation , and new
language features are added
periodically. However, only some
JavaScript engines support these
new features:
property getter and setter
functions (supported by WebKit,
Opera,[48] ActionScript, and Rhino)
[49]
conditional catch clauses
iterator protocol (adopted from
Python)
shallow generators- coroutines
(adopted from Python)
array comprehensions and
generator expressions (adopted
from Python)
proper block scope via the
let keyword
array and object destructuring
(limited form of pattern matching )
concise function expressions
( function(args) expr )
ECMAScript for XML (E4X), an
extension that adds native XML
support to ECMAScript (unsupported
in Firefox since version 21[50] )
Syntax
Main article: JavaScript syntax
As of 2011, the latest version of the
language is JavaScript 1.8.5. It is a
superset of ECMAScript (ECMA-262)
Edition 3. Extensions to the
language, including partial
ECMAScript for XML (E4X)
(ECMA-357) support and
experimental features considered
for inclusion into future ECMAScript
editions, are documented here.[51]
Simple examples
Variables in JavaScript can be
defined using the var keyword:
[52]
var x; //defines the
variable x, although
no value is assigned
to it by default
var y = 2; //
defines the variable
y and assigns the
value of 2 to it
Note the comments in the example
above, both of which were preceded
with two forward slashes.
There is no built-in I/O functionality
in JavaScript; the runtime
environment provides that. The
ECMAScript specification in edition
5.1 mentions: [53]
However, most runtime
environments have a console
object[54] that can be used to print
output. Here is a minimalist Hello
World program :
console.log("Hello
world!");
A simple recursive function:
function factorial
(n) {
if (n === 0) {
return 1;
}
return n *
factorial(n - 1);
}
Anonymous function (or lambda)
syntax and closure example:
var displayClosure =
function() {
var count = 0;
return function
() {
return +
+count;
};
}
var inc =
displayClosure();
inc(); // returns 1
inc(); // returns 2
inc(); // returns 3
Variadic function demonstration
(arguments is a special variable).
[55]
var sum = function()
{
var i, x = 0;
for (i = 0; i <
arguments.length; +
+i) {
x +=
arguments[i];
}
return x;
}
sum(1, 2, 3); //
returns 6
Immediately-invoked function
expressions allow functions to pass
around variables under their own
closures.
var v;
v = 1;
var getValue =
(function(v) {
return function()
{return v;};
})(v);
v = 2;
getValue(); // 1
More advanced example
This sample code displays various
JavaScript features.
/* Finds the lowest
common multiple
(LCM) of two numbers
*/
function
LCMCalculator(x, y)
{ // constructor
function
var checkInt =
function (x) { //
inner function
if (x % 1 !
== 0) {
throw
new TypeError(x + "
is not an
integer"); // throw
an exception
}
return x;
};
this.a = checkInt
(x)
//
semicolons ^^^^
are optional, a
newline is enough
this.b = checkInt
(y);
}
// The prototype of
object instances
created by a
constructor is
// that
constructor's
"prototype" property.
LCMCalculator.
prototype = { //
object literal
constructor:
LCMCalculator, //
when reassigning a
prototype, set the
constructor property
appropriately
gcd: function ()
{ // method that
calculates the
greatest common
divisor
// Euclidean
algorithm:
var a =
Math.abs(this.a), b
= Math.abs(this.b),
t;
if (a < b) {
// swap
variables
t = b;
b = a;
a = t;
}
while (b !==
0) {
t = b;
b = a %
b;
a = t;
}
// Only need
to calculate GCD
once, so "redefine"
this method.
// (Actually
not redefinition—
it's defined on the
instance itself,
// so that
this.gcd refers to
this "redefinition"
instead of
LCMCalculator.
prototype.gcd.
// Note that
this leads to a
wrong result if the
LCMCalculator object
members "a" and/or
"b" are altered
afterwards.)
// Also,
'gcd' === "gcd", this
['gcd'] === this.gcd
this['gcd']
= function () {
return a;
};
return a;
},
// Object
property names can
be specified by
strings delimited by
double (") or single
(') quotes.
lcm : function
() {
// Variable
names don't collide
with object
properties, e.g., |
lcm| is not |
this.lcm|.
// not using
|this.a * this.b|
to avoid FP
precision issues
var lcm =
this.a / this.gcd()
* this.b;
// Only need
to calculate lcm
once, so "redefine"
this method.
this.lcm =
function () {
return
lcm;
};
return lcm;
},
toString:
function () {
return
"LCMCalculator: a =
" + this.a + ", b =
" + this.b;
}
};
// Define generic
output function;
this implementation
only works for web
browsers
function output(x) {
document.body.
appendChild(document.
createTextNode(x));
document.body.
appendChild(document.
createElement('br'));
}
// Note: Array's map
() and forEach() are
defined in
JavaScript 1.6.
// They are used
here to demonstrate
JavaScript's
inherent functional
nature.
[[25, 55], [21,
56], [22, 58], [28,
56]].map(function
(pair) { // array
literal + mapping
function
return new
LCMCalculator(pair
[0], pair[1]);
}).sort(function
(a, b) { // sort
with this
comparative function
return a.lcm()
- b.lcm();
}).forEach(function
(obj) {
output(obj + ",
gcd = " + obj.gcd()
+ ", lcm = " +
obj.lcm());
});
The following output should be
displayed in the browser window.
LCMCalculator: a =
28, b = 56, gcd =
28, lcm = 56
LCMCalculator: a =
21, b = 56, gcd =
7, lcm = 168
LCMCalculator: a =
25, b = 55, gcd =
5, lcm = 275
LCMCalculator: a =
22, b = 58, gcd =
2, lcm = 638
Use in web pages
See also: Dynamic HTML and Ajax
(programming)
The most common use of
JavaScript is to add client-side
behavior to HTML pages, a.k.a.
Dynamic HTML (DHTML). Scripts
are embedded in or included from
HTML pages and interact with the
Document Object Model (DOM) of
the page. Some simple examples of
this usage are:
Loading new page content or
submitting data to the server via
AJAX without reloading the page
(for example, a social network
might allow the user to post status
updates without leaving the page)
Animation of page elements,
fading them in and out, resizing
them, moving them, etc.
Interactive content, for example
games, and playing audio and video
Validating input values of a web
form to make sure that they are
acceptable before being submitted
to the server.
Transmitting information about
the user's reading habits and
browsing activities to various
websites. Web pages frequently do
this for web analytics , ad tracking,
personalization or other purposes.
[56]
Because JavaScript code can run
locally in a user's browser (rather
than on a remote server), the
browser can respond to user
actions quickly, making an
application more responsive.
Furthermore, JavaScript code can
detect user actions which HTML
alone cannot, such as individual
keystrokes. Applications such as
Gmail take advantage of this: much
of the user-interface logic is written
in JavaScript, and JavaScript
dispatches requests for information
(such as the content of an e-mail
message) to the server. The wider
trend of Ajax programming similarly
exploits this strength.
A JavaScript engine (also known as
JavaScript interpreter or JavaScript
implementation) is an interpreter that
interprets JavaScript source code
and executes the script
accordingly. The first JavaScript
engine was created by Brendan Eich
at Netscape Communications
Corporation, for the Netscape
Navigator web browser. The engine,
code-named SpiderMonkey , is
implemented in C . It has since been
updated (in JavaScript 1.5) to
conform to ECMA-262 Edition 3. The
Rhino engine, created primarily by
Norris Boyd (formerly of Netscape;
now at Google) is a JavaScript
implementation in Java. Rhino, like
SpiderMonkey, is ECMA-262 Edition
3 compliant.
A web browser is by far the most
common host environment for
JavaScript. Web browsers typically
create "host objects" to represent
the Document Object Model (DOM)
in JavaScript. The web server is
another common host environment.
A JavaScript webserver would
typically expose host objects
representing HTTP request and
response objects, which a
JavaScript program could then
interrogate and manipulate to
dynamically generate web pages.
Because JavaScript is the only
language that the most popular
browsers share support for, it has
become a target language for many
frameworks in other languages,
even though JavaScript was never
intended to be such a language. [57]
Despite the performance limitations
inherent to its dynamic nature, the
increasing speed of JavaScript
engines has made the language a
surprisingly feasible compilation
target.
Example script
Below is a minimal example of a
standards-conforming web page
containing JavaScript (using HTML
5 syntax) and the DOM :
<!DOCTYPE html>
<meta
charset="utf-8">
<title>Minimal
Example</title>
<h1
id="header">This is
JavaScript</h1>
<script>
document.body.appendC
hild
(document.createTextN
ode('Hello World!'));
var h1 =
document.getElementBy
Id('header'); //
holds a reference to
the <h1> tag
h1 =
document.getElementsB
yTagName('h1')
[0]; // accessing
the same <h1> element
</script>
<noscript>Your
browser either does
not support
JavaScript, or has
it turned off.</
noscript>
Compatibility considerations
Main article: Web interoperability
Because JavaScript runs in widely
varying environments, an important
part of testing and debugging is to
test and verify that the JavaScript
works across multiple browsers.
The DOM interfaces for
manipulating web pages are not part
of the ECMAScript standard, or of
JavaScript itself. Officially, the
DOM interfaces are defined by a
separate standardization effort by
the W3C ; in practice, browser
implementations differ from the
standards and from each other, and
not all browsers execute
JavaScript.
To deal with these differences,
JavaScript authors can attempt to
write standards-compliant code
which will also be executed
correctly by most browsers; failing
that, they can write code that
checks for the presence of certain
browser features and behaves
differently if they are not available.
[58] In some cases, two browsers
may both implement a feature but
with different behavior, and authors
may find it practical to detect what
browser is running and change their
script's behavior to match. [59][60]
Programmers may also use
libraries or toolkits which take
browser differences into account.
Furthermore, scripts may not work
for some users. For example, a user
may:
use an old or rare browser with
incomplete or unusual DOM support,
use a PDA or mobile phone
browser which cannot execute
JavaScript,
have JavaScript execution
disabled as a security precaution,
use a speech browser due to, for
example, a visual disability.
To support these users, web authors
can try to create pages which
degrade gracefully on user agents
(browsers) which do not support the
page's JavaScript. In particular, the
page should remain usable albeit
without the extra features that the
JavaScript would have added. An
alternative approach that many find
preferable is to first author content
using basic technologies that work
in all browsers, then enhance the
content for users that have
JavaScript enabled. This is known
as progressive enhancement.
Accessibility
Main article: Web accessibility
Assuming that the user has not
disabled its execution, client-side
web JavaScript should be written to
enhance the experiences of visitors
with visual or physical disabilities,
and certainly should avoid denying
information to these visitors.[61]
Screen readers, used by the blind
and partially sighted , can be
JavaScript-aware and so may
access and read the page DOM
after the script has altered it. The
HTML should be as concise,
navigable and semantically rich as
possible whether the scripts have
run or not. JavaScript should not be
totally reliant on mouse or keyboard
specific events because a user may
be physically unable to use these
input devices. For this reason,
device-agnostic events such as
onfocus and onchange are
preferable to device-centric events
such as onmouseover and
onkeypress in most cases.[61]
JavaScript should not be used in a
way that is confusing or disorienting
to any web user. For example, using
script to alter or disable the normal
functionality of the browser, such as
by changing the way the "back" or
"refresh" buttons work, is usually
best avoided. Equally, triggering
events that the user may not be
aware of reduces the user's sense
of control as do unexpected scripted
changes to the page content. [62]
Often the process of making a
complex web page as accessible as
possible becomes a nontrivial
problem where issues become
matters of debate and opinion, and
where compromises are necessary
in the end. However, user agents
and assistive technologies are
constantly evolving and new
guidelines and relevant information
are continually being published on
the web.[61]
